const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const vueConfig = {
  context: path.resolve(__dirname, "."), // 基本目录，一个绝对路径，用于解析配置中的入口点和加载程序。
  entry: {
    app: "./src/main.js",
  }, // 入口文件
  output: {
    filename: "[name].[hash:8].js", // 打包出来的 bundle 名称为 "[name].[hash:8].js"
    path: path.resolve(__dirname, "./dist"), // 输出目录
    publicPath: "/", // 外部资源目录
  },
  resolve: {
    extensions: [".js", ".vue"], // 引入时省略js和vue文件
  },
  module: {
    rules: [
      // 编译vue文件
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"), // 指定模版文件
      chunks: ["app"], // 指定需要加载的 chunk
      inject: "body", // 指定 script 脚本注入的位置为 body
    }),
    new CleanWebpackPlugin(), //清除打包目录
    new VueLoaderPlugin(), // vue-loader插件
  ],
  devServer: {
    port: 8081,
    hot: true,
    open: true,
    client: {
      webSocketURL: {
        port: 8081,
      },
    },
    allowedHosts: "all", // 允许所有主机访问
    static: [
      // 引入静态文件目录
      {
        directory: path.join(__dirname, "./public"),
      },
      {
        directory: path.join(__dirname, "../vue-next"),
      },
    ],
    historyApiFallback: {
      disableDotRule: true, //禁止在链接中使用Port "." 符号
      rewrites: [
        { from: /^\/$/, to: "/index.html" }, // 将所有的 404 响应重定向到 index.html 页面
      ],
    },
  },
  externals: {
    vue: "Vue", //告诉 webpack，让它在加载 vue 模块的时候去 CDN 全局变量里面找 Vue
  },
  devtool:"eval-source-map"
};
module.exports = vueConfig;
